<template>
  <div class="web-container video">
    <span class="router-title">当前位置：<router-link to="/">首页</router-link> > <router-link to="/videomusic">视听</router-link> > <span class="title">{{list.videoName||list.title}}</span></span>
    <div class="content">
      <div class="content-top">
        <span class="title">{{list.videoName||list.title}}</span>
        <!-- <div class="desc" v-if="list.previewUrl">
          <span class="author">播放量:{{collect.readreCount>100?collect.readreCount:'100'}}</span>
          <span :class="[collect.whetherCollection==1 ? 'active':'','collect']" @click="toggleCollec(collect.whetherCollection)"> <i class="iconfont icon-shoucang"></i>收藏</span>
        </div> -->
      </div>
      <div class="content-bottom">
        <iframe id="iframe_box" :src="list.previewUrl||list.describ" v-if="list.previewUrl||list.describ" style="width: 100%;height: 600px;border: none;"></iframe>
        <div style="text-align:center" v-else>
            <img src="../../../static/images/base/none.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    //   classList: [{ max_file_name: "" }],
    //   bookName: null,
    //   pageSize: 10,
    //   currentPage: 1,
    //   total: 0,
    //   newVideo: { max_file_name: "" },
    //   loading: true,
    //   src: undefined,
    //   collect: {},
      list:JSON.parse(this.$route.query.video)
    };
  },
  created() {
    console.log(this.list)
  },
  components: {},
  mounted() {
    // this.init();
  },
  methods: {
    //记录
     //是否收藏 添加 阅读数
    isCollect() {
      isCollect(this.list.external_source_id,7).then(res => {
        console.log(res.data.date);
        this.collect = res.data.date;
      });
    },
    init() {
      this.swiper = new Swiper(".swiper-container", {
        slidesPerView: 4,
        spaceBetween: 20,
        slidesPerGroup: 4,
        // loop: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        loopFillGroupWithBlank: true,
        navigation: {
          nextEl: ".swiper-events-next",
          prevEl: ".swiper-events-prev"
        }
      });
   
    },
    //查询是否收藏
    toggleCollec(is) {
      if (is == 0) {
        addCollect(7,this.chioceImg(this.list.file_name),this.list.external_source_name,this.list.file_name,this.list.external_source_id).then(res => {
          console.log(res.data);
           this.$message({
              message: '收藏成功',
              type: 'success',
              center: true
            });
        });
      } else {
        delCollect(this.collect.collectionId).then(res => {
          console.log(res.data);
           this.$message({
              message: '移除收藏',
              type: 'success',
              center: true
            });
        });
      }
      this.isCollect();
    },
    goToContent(item) {
      this.list = item;
      this.loading = false;
      this.isCollect();
      readRecord(item.videoName,3,item.videoId,'',item.cover,"").then(res=>{
        console.log(res.data)
      })
      this.src = item.previewUrl;    
      // GetVideoPlayerUrl(item.max_file_name).then(result => {
      //   this.loading = false;
      // });
    },
    chioceImg(item) {
      return ("http://cacv.cnki.net/Content/CACV/FM/" +item.substring(0, 8) +"/" +item +".jpg");
    }
  }
};
</script>
<style lang="less" scoped>
.custom-dz{
  .content .content-bottom .title{
    color: #e93926
  }
}
.router-title {
  display: block;
  font-size: 15px;
  margin: 30px 0;
  .title {
    color: #a1a1a1;
  }
}
.content {
  min-height: 400px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;

  .content-top {
    .title {
      display: block;
      font-size: 36px;
      margin-bottom: 30px;
    }
    .desc {
      display: flex;
      font-size: 16px;
      color: #808080;
      align-items: center;
      span + span {
        margin-left: 40px;
      }
      span{
        display: flex;
        align-items: center;
      }
      .collect.active{
      color: red;
      .icon-shoucang{
        color: red;
      }
    }
      .collect{
        cursor: pointer;
        }
      .icon-shoucang {
        font-size: 25px;
      }
    }
  }
  .content-bottom {
    .title {
      display: block;
      padding: 15px 25px;
      font-size: 16px;
      color: #15c798;
      font-weight: bold;
      border-bottom: 1px solid #c1c1c1;
      position: relative;
    }
    .title::after {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      background: #fff;
      border-top: 1px solid #c1c1c1;
      border-right: 1px solid #c1c1c1;
      transform: rotate(-45deg);
      position: absolute;
      bottom: -5px;
      left: 35px;
    }
    .events-swiper {
      position: relative;
      margin-top: 20px;
      border-radius: 10px;
      background: #fff;
      padding: 20px;
      .swiper-events-next,
      .swiper-events-prev {
        border: none;
        position: absolute;
        outline: none;
        top: 35%;
        width: 40px;
        height: 40px;
        z-index: 10;
        cursor: pointer;
        background-position: center;
        background-repeat: no-repeat;
      }
      .swiper-events-prev {
        background-image: url("/static/images/base/left-arrow.png");
        left: 5px;
      }
      .swiper-events-next {
        background-image: url("/static/images/base/right-arrow.png");
        right: 5px;
      }
      .swiper-container {
        width: 1100px;
        height: 260px;
        .swiper-slide {
          position: relative;
          // background: url("/static/images/base/events-swiper.png") no-repeat;
          // background-size: cover;
          height: 260px;
          border-radius: 10px;
          box-shadow: 0px 2px 6px 0px rgba(230, 230, 230, 0.75);
          .swiper-cover {
            display: block;
            height: 185px;
            background: url("/static/images/base/video-box.png") no-repeat;
            background-size: 100% 100%;
          }
        }
        .swiper-label {
          position: absolute;
          left: 0px;
          bottom: 0px;
          height: 65px;
          padding: 5px;
          .label-time {
            font-size: 12px;
            color: #a1a1a1;
            display: block;
          }
          .label-desc {
            display: block;
            font-size: 16px;
            color: #252525;
          }
        }
      }
    }
  }
}
</style>
<style lang="less">
.video {
  .events-swiper {
    .swiper-pagination-bullet-active {
      background: #1de3af;
    }
    .swiper-pagination-bullet {
      width: 20px;
      height: 20px;
    }
  }
}
